<template>
  <div id="myLoading" v-show="show">
    <!--<div class="my-loading" v-html="svg" :style="loadingStyle">-->
      <vue-loading type="spiningDubbles" color="#26a2ff" :size="{ width: '50px', height: '50px' }" style="position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;"></vue-loading>
    <!--</div>-->
  </div>
</template>

<script>
  import vueLoading from 'vue-loading-template'

  export default {
    components: {vueLoading},
    name: 'myLoading',
    data () {
      return {
      }
    },
    props: {
      show: Boolean,
      text: String,
      type: {
        type: String,
        default: 'beat'
      },
      color: {
        type: String,
        default: '#5ac1dd'
      },
      size: { default: () => ({ width: '30px', height: '30px' })}
    },
    created () {
//      console.log(this.show, this.type, this.color)
    },
    computed: {
      loadingStyle () {
        return { fill: this.color, width: this.size.width, height: this.size.height}
      }
    },
    mounted () {
    },
    watch: {
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  #myLoading{
    position: fixed;
    top:0;
    left:0;
    z-index:121;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.05);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    img {
      margin: 5rem auto;
    }
  }
</style>
